<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<style type="text/css">
		*{
			box-sizing: border-box;
			margin:0 auto;
			padding:0;
		}
		html,body{
			width:100%;
			height:100%;
			position:relative;
		}
		body{
			border:1px solid transparent;
		}
		.circle{
			width:100px;
			height:100px;
			border-radius: 50%;
		}
		.a{
			position:absolute;
			top:calc(50% - 50px);
			left:calc(50% - 50px);
			background: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
		}
		.a::before{
			content: "";
			display: block;
			width:8px;
			height:8px;
			background-color: #fff;
			border-radius: 50%;
			position:absolute;
			top:2px;
			left:46px;
		}
		.a::after{
			content: "";
			display: block;
			width:8px;
			height:8px;
			background-color: #000;
			border-radius: 50%;
			position:absolute;
			top:46px;
			left:46px;
		}
		.b{
			position:absolute;
			top:-100px;
			left:0;
			transform-origin:50px 150px;
			animation: tocircle 5s linear 0s infinite;
		}
		.c{
			position:absolute;
			top:0;
			left:0;
			background: linear-gradient(to right, #ff9569 0%, #e92758 100%);
			transform-origin:50px 50px;
			animation: tocircle 5s linear 0s infinite;
		}
		@keyframes tocircle{
			from{
				transform: rotateZ(0deg);
			}
			to{
				transform: rotateZ(360deg);
			}
		}
		.c::before{
			content: "";
			display: block;
			width:8px;
			height:8px;
			background-color: #fff;
			border-radius: 50%;
			position:absolute;
			bottom:2px;
			left:46px;
		}
		.c::after{
			content: "";
			display: block;
			width:8px;
			height:8px;
			background-color: #000;
			border-radius: 50%;
			position:absolute;
			top:46px;
			left:46px;
		}
	</style>
</head>
<body>
	<div class="circle a">
		<div class="circle b">
			<div class="circle c"></div>
		</div>
	</div>
</body>
</html>